<template>
  <!--添加地址 -->
  <section class="component add-address">
    <el-form
      :model="model"
      :rules="rules"
      inline
      label-width="120px"
      ref="form"
    >
      <el-form-item label="关系" prop="relation">
        <el-select placeholder="请选择" v-model="model.relation">
          <el-option
            :key="index"
            :label="name"
            :value="code"
            v-for="{ index, name, code } in $dict.getDictData('Relationship')"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="姓名" prop="contName">
        <el-input v-model="model.contName"></el-input>
      </el-form-item>

      <!-- <el-form-item label="案件来源" prop="dataSource">
        <el-select placeholder="请选择" v-model="model.dataSource">
          <el-option :key="index" :label="name" :value="code" v-for="{index,name,code} in $dict.getDictData('DataSource').filter(v => !disabledDataSource.includes(v.code))"></el-option>
        </el-select>
      </el-form-item> -->

      <el-form-item label="地址类型" prop="addressType">
        <el-select placeholder="请选择" v-model="model.addressType">
          <el-option
            :key="index"
            :label="name"
            :value="code"
            v-for="{ index, name, code } in $dict.getDictData('AddressType')"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="地址状态" prop="addressStatus">
        <el-select placeholder="请选择" v-model="model.addressStatus">
          <el-option
            :key="index"
            :label="name"
            :value="code"
            v-for="{ index, name, code } in $dict.getDictData('AddressStatus')"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="地区" prop="areaIds">
        <el-cascader
          :options="$city.getCityData()"
          :props="{ checkStrictly: true }"
          clearable
          v-model="model.areaIds"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="fullAddress">
        <el-input
          style="width:495px"
          v-model="model.fullAddress"
          :maxlength="300"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="confirm-button">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Form } from "element-ui";
import { Dependencies } from "~/core/decorator";
import { Emit } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { namespace } from "vuex-class";

const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class AddAddress extends Vue {
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId: string;

  private disabledDataSource = ["IMPORT", "INTERFACE"];
  private model: any = {};
  private rules: any = {};

  @Emit("close")
  private emitClose() {
    const form = this.$refs.form as Form;
    form.resetFields();
  }

  private created() {
    this.model = {
      contName: "",
      detail: "",
      dataSource: "",
      caseId: "",
      relation: "",
      addressType: "",
      addressStatus: "",
      areaIds: [],
      get areaId() {
        if (this.areaIds.length) {
          return this.areaIds[this.areaIds.length - 1];
        }
        return "";
      }
    };
    this.rules = {
      contName: { required: true, message: "请输入联系人姓名" },
      dataSource: { required: true, message: "请选择案件来源" },
      relation: { required: true, message: "请选择客户关系" },
      areaIds: [{ required: true, message: "请选择地址" }],
      fullAddress: [{ required: true, message: "请输入详细地址" }],
      addressStatus: [{ required: true, message: "请选择地址状态" }],
      addressType: [{ required: true, message: "请选择地址类型" }]
    };
  }

  private submit() {
    const form = this.$refs.form as Form;
    form.validate(v => {
      if (!v) return;
      this.model.caseId = this.caseId;
      this.caseOperatorPageService
        .addPersonalAddress(this.model)
        .subscribe(data => {
          this.$message.success("操作成功");
          form.resetFields();
          this.emitClose();
        });
    });
  }
}
</script>

<style scoped lang="less"></style>
